---
title: <media-cast-button>
description: Media Cast Button
layout: ../../../../layouts/ComponentLayout.astro
source: https://github.com/muxinc/media-chrome/tree/main/src/js/media-cast-button.js
---

import SandpackContainer from "../../../../components/SandpackContainer.astro";

The `<media-cast-button>` component is used to bring up the Cast menu and select playback on a Chromecast-enabled device and to stop casting once started.

The contents of the `<media-cast-button>` will update based on the availability of casting support and current casting state.
- When the media is not currently casting, the `enter` slot will be shown.
- When the media is currently casting, the `exit` slot will be shown.

> Requires the [`<castable-video>`](https://github.com/muxinc/castable-video) element
or a custom media element that implements the `CastableMedia` interface like
[`<mux-video>`](https://github.com/muxinc/elements/tree/main/packages/mux-video).

> NOTE: Google Cast support is only available in Chromium browsers. Interacting with these examples may not do anything when support isn't available.

## Default usage

<SandpackContainer
  editorHeight={190}
  dependencies={{
    "castable-video": "^1.0.0"
  }}
  html={`<media-controller>
  <castable-video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  ></castable-video>
  <media-cast-button></media-cast-button>
</media-controller>`}
/>

## Customize icons

You can modify the contents of the `<media-cast-button>` component using slots. This is useful if you'd like to use your own custom icons instead of the default ones provided by media-chrome.

Here's an example of how you can replace the default icons with the words "Cast" and "Exit".

<SandpackContainer
  editorHeight={250}
  dependencies={{
    "castable-video": "^1.0.0"
  }}
  html={`<media-controller>
  <castable-video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  ></castable-video>
  <media-cast-button>
    <span slot="enter">Cast</span>
    <span slot="exit">Exit</span>
  </media-cast-button>
</media-controller>`}
/>

Alternatively, if you would like to represent both states using a single element you could use the `icon` slot instead. This is useful for creating an animated icon that transitions between states. Here's a basic example that uses CSS to change an element based on the casting state.

<SandpackContainer
  height={365}
  active="css"
  dependencies={{
    "castable-video": "^1.0.0"
  }}
  html={`<media-controller>
  <castable-video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></castable-video>
  <media-cast-button>
    <span class="my-icon" slot="icon">[ ]</span>
  </media-cast-button>
</media-controller>`}
css={`.my-icon {
  border-radius: 4px;
  outline: 2px solid #fff;
  padding: 0 6px;
  transition: all .4s;
}

media-cast-button[mediaiscasting] .cast-icon {
  outline: 2px solid green;
  color: green;
}
`}
/>

## Styling with attributes

The `<media-cast-button>` doesn't expose any configuration attributes.
However, it will be updated with [Media UI Attributes](#media-ui-attributes) any time the availability state changes.

You can use these attributes to style the button. For example, if casting is unavailable, hide the button:

```css
media-cast-button[mediacastunavailable] {
  display: none;
}
```

Or set the background to blue, if the media is now casting:
```css
media-cast-button[mediaiscasting] {
  --media-control-background: blue;
}
